<script setup lang="ts">
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { User, Lock, View, Hide, Upload, Message, Phone, Edit, OfficeBuilding } from '@element-plus/icons-vue'
import { useRoute,useRouter } from 'vue-router'
import api from '../api'
import TestLogo from '@/assets/headLogo.png'
import default_icon from '@/assets/images/default_icon/default_icon.png'
import bg from '@/assets/images/pages/login.jpg'
import type { user_detail } from '@/utils/types'
import {ref,onMounted} from 'vue'
const route = useRoute()
const router = useRouter()

const user_information_type: user_detail = {
  id: '',
  username: '',
  password: '',
  sex: '',
  icon: '',
  email: '',
  mobile: '',
  nick_name: '',
  note: '',
  workType: '',
  workplace: '',
  research: '',
  highest_role_name: '',
}

const workTypeOptions = [{value:'国家机关',label: '国家机关',},
 {value:'事业单位',label:'事业单位',},
{value:'企业单位',label:'企业单位',}, 
{value:'社会组织',label:'社会组织',},
]

const researchOptions = [
  {
    label: 'F01 电子学与信息系统',
    value: 'F01',
    children: [
      { label: '信息论', value: 'F0101' },
      { label: '信息系统与系统安全', value: 'F0102' },
      { label: '通信理论与系统', value: 'F0103' },
      { label: '通信网络', value: 'F0104' },
      { label: '移动通信', value: 'F0105' },
      { label: '空天通信', value: 'F0106' },
      { label: '海上和水下通信', value: 'F0107' },
      { label: '多媒体通信', value: 'F0108' },
      { label: '光通信', value: 'F0109' },
      { label: '量子通信与量子信息处理', value: 'F0110' },
      { label: '信号理论与信号处理', value: 'F0111' },
      { label: '音频处理与技术', value: 'F0112' },
      { label: '信息获取与处理', value: 'F0113' },
      { label: '探测与成像', value: 'F0114' },
      { label: '水下信息感知与处理', value: 'F0115' },
      { label: '图像信息处理', value: 'F0116' },
      { label: '多媒体信息处理', value: 'F0117' },
      { label: '电路与系统', value: 'F0118' },
      { label: '电磁场与波', value: 'F0119' },
      { label: '大功率理论与技术', value: 'F0120' },
      { label: '微波光子学', value: 'F0121' },
      { label: '物理电子学', value: 'F0122' },
      { label: '敏感电子学与传感器', value: 'F0123' },
      { label: '生物电子学与生物信息处理', value: 'F0124' },
      { label: '医学信息检测与处理', value: 'F0125' },
      { label: '电子信息与其他领域交叉', value: 'F0126' },
    ],
  },
  {
    label: 'F02 计算机科学',
    value: 'F02',
    children: [
      { label: '计算机科学的基础理论', value: 'F0201' },
      { label: '系统软件、数据平台与工业软件', value: 'F0202' },
      { label: '软件理论、软件工程与服务', value: 'F0203' },
      { label: '计算机系统结构与硬件技术', value: 'F0204' },
      { label: '网络与系统安全', value: 'F0205' },
      { label: '信息安全', value: 'F0206' },
      { label: '计算机网络', value: 'F0207' },
      { label: '物联网及其他新型网络', value: 'F0208' },
      { label: '计算机图形学与虚拟现实', value: 'F0209' },
      { label: '计算机图像视频处理与多媒体技术', value: 'F0210' },
      { label: '信息检索与社会计算', value: 'F0211' },
      { label: '数据科学与大数据计算', value: 'F0212' },
      { label: '生物信息计算与数字健康', value: 'F0213' },
      { label: '新型计算及其应用基础', value: 'F0214' },
      { label: '计算机与其他领域交叉', value: 'F0215' },
    ],
  },
  {
    label: 'D01 地理学',
    value: 'D01',
    children: [
      { label: '地理大数据与空间智能', value: 'D0116' },
      { label: '地理观测与模拟技术', value: 'D0117' },
    ],
  },
  {
    label: 'D02 地质学',
    value: 'D02',
    children: [
      { label: '古生物、古人类和古生态学', value: 'D0201' },
      { label: '地层学', value: 'D0202' },
      { label: '矿物学（含矿物物理学）', value: 'D0203' },
      { label: '岩石学', value: 'D0204' },
      { label: '矿床学', value: 'D0205' },
      { label: '沉积学和盆地动力学', value: 'D0206' },
      { label: '石油天然气地质学', value: 'D0207' },
      { label: '煤地质学', value: 'D0208' },
      { label: '第四纪地质学', value: 'D0209' },
      { label: '前寒武纪地质学', value: 'D0210' },
      { label: '大地构造学与构造地质学', value: 'D0211' },
      { label: '勘探技术与地质钻探', value: 'D0212' },
      { label: '水文地质学', value: 'D0213' },
      { label: '工程地质学', value: 'D0214' },
      { label: '数学地质学与遥感地质学', value: 'D0215' },
      { label: '火山学和热地质学', value: 'D0216' },
      { label: '生物地质学', value: 'D0217' },
    ],
  },
  {
    label: 'D03 地球化学',
    value: 'D03',
    children: [
      { label: '同位素地球化学', value: 'D0301' },
      { label: '元素地球化学', value: 'D0302' },
      { label: '地质年代学', value: 'D0303' },
      { label: '有机地球化学', value: 'D0304' },
      { label: '分析地球化学', value: 'D0305' },
      { label: '实验和计算地球化学', value: 'D0306' },
      { label: '新兴交叉地球化学', value: 'D0307' },
      { label: '岩石地球化学', value: 'D0308' },
      { label: '化石能源地球化学', value: 'D0309' },
      { label: '表层地球化学', value: 'D0310' },
      { label: '矿床与勘查地球化学', value: 'D0311' },
      { label: '生物地球化学', value: 'D0312' },
      { label: '大气和海洋地球化学', value: 'D0313' },
    ],
  },
  {
    label: 'D04 地球物理学和空间物理学',
    value: 'D04',
    children: [
      { label: '物理大地测量学', value: 'D0401' },
      { label: '卫星大地测量学', value: 'D0402' },
      { label: '应用大地测量学', value: 'D0403' },
      { label: '重力学', value: 'D0404' },
      { label: '地磁学', value: 'D0405' },
      { label: '地球电磁学', value: 'D0406' },
      { label: '地震学', value: 'D0407' },
      { label: '地球内部物理和地球动力学（含地热）', value: 'D0408' },
      { label: '热气地球物理学', value: 'D0409' },
      { label: '矿产地球物理学', value: 'D0410' },
      { label: '工程和环境地球物理学', value: 'D0411' },
      { label: '空间物理学', value: 'D0412' },
      { label: '空间天气学', value: 'D0413' },
      { label: '地球和行星物理实验与仪器', value: 'D0414' },
    ],
  },
  {
    label: 'D05 大气科学',
    value: 'D05',
    children: [
      { label: '天气学', value: 'D0501' },
      { label: '气候与气候系统', value: 'D0502' },
      { label: '古气候模拟与动力学', value: 'D0503' },
      { label: '大气动力学', value: 'D0504' },
      { label: '大气物理学', value: 'D0505' },
      { label: '大气化学', value: 'D0506' },
      { label: '生态气象', value: 'D0507' },
      { label: '大气观测、遥感和探测技术与方法', value: 'D0508' },
      { label: '大气数据与信息技术', value: 'D0509' },
      { label: '大气数值模式发展', value: 'D0510' },
      { label: '地球系统模式发展', value: 'D0511' },
      { label: '气候变化及影响与应对', value: 'D0512' },
      { label: '大气环境与健康气象', value: 'D0513' },
      { label: '应用气象学', value: 'D0514' },
    ],
  },
  {
    label: 'D06 海洋科学',
    value: 'D06',
    children: [
      { label: '物理海洋学', value: 'D0601' },
      { label: '海洋化学', value: 'D0602' },
      { label: '海洋地质学与地球物理学', value: 'D0603' },
      { label: '生物海洋学与海洋生物资源', value: 'D0604' },
      { label: '海洋生态与环境科学', value: 'D0605' },
      { label: '河口海岸学', value: 'D0606' },
      { label: '海洋遥感', value: 'D0607' },
      { label: '海洋物理与观测探测技术', value: 'D0608' },
      { label: '海洋数模科学与信息系统', value: 'D0609' },
      { label: '海洋系统与全球变化', value: 'D0610' },
      { label: '海洋工程与环境效应', value: 'D0611' },
      { label: '海洋灾害与防灾减灾', value: 'D0612' },
      { label: '海洋能源与资源', value: 'D0613' },
      { label: '海陆统筹与可持续发展', value: 'D0614' },
      { label: '极地科学', value: 'D0615' },
    ],
  },
]

const user_information = ref(user_information_type)

// 参数
const password_1 = ref('')
const password_2 = ref('')

const sex_items = [{value: '男', label: '男',}, {value: '女', label: '女',},]
const privacyPolicies = ref(false) // 用户协议
const is_password_visible = ref(false) // 密码可见性
const is_private_open = ref(false) // 用户协议弹窗
const private_info = ref('') // 用户协议

// ------------------------------ 注册-----------------------------
// eslint-disable-next-line sonarjs/cognitive-complexity
function register() {
  if (user_information.value.username === '') {
    ElMessage.error('用户名为空！')
  }
  else if (user_information.value.email === '') {
    ElMessage.error('邮箱为空，请输入！')
  }
  else if (user_information.value.workType === '') {
    ElMessage.error('单位性质为空，请输入！')
  }
  else if (user_information.value.workplace === '') {
    ElMessage.error('工作单位为空，请输入！')
  }
  else if (user_information.value.research === '') {
    ElMessage.error('研究领域为空，请输入！')
  }
  else if (password_1.value === '') {
    ElMessage.error('密码为空，请输入！')
  }
  else if (password_1.value !== password_2.value) {
    ElMessage.error('输入密码不一致！请重新输入！')
  }
  else if (password_1.value.length < 6) {
    ElMessage.error('密码至少6位！')
  }
  else if (!privacyPolicies.value) {
    ElMessage.error('请先阅读并同意用户协议和隐私政策！')
  }
  else {
    user_information.value.password = password_1.value
    api.register.register(user_information.value).then(res => {
      if (res.code === 200) {
        const user_detail = res.data

        localStorage.setItem('userData', JSON.stringify(user_detail))
        localStorage.setItem('accessToken', JSON.stringify(user_detail.token))
        axios.defaults.headers.common.Authorization = user_detail.token

        router.replace(route.query.to ? String(route.query.to) : '/')
      }
      else if (res.data.code === 409) {
        ElMessage.error('用户名重复，请重新输入！')
      }
    })
      .catch(error => {
        ElMessage.error('注册失败!', error)
      })
  }
}

// function readFile(filePath: any) {
//   let xhr = null
//   const okStatus = document.location.protocol === 'file' ? 0 : 200

//   xhr = window.XMLHttpRequest
//     ? new XMLHttpRequest()
//     : new ActiveXObject('Microsoft.XMLHTTP')
//   xhr.open('GET', filePath, false)
//   xhr.overrideMimeType('text/html;charset=utf-8')
//   xhr.send(null)

//   return xhr.status === okStatus ? xhr.responseText : null
// }

// function privacy() {
//   const filePath = '/privacy.html'

//   private_info.value = readFile(filePath)
//   is_private_open.value = true
// }

// ... existing code ...
// 用户协议
function readFile(filePath: any) {
  return new Promise((resolve, reject) => {
    let xhr: XMLHttpRequest | null = null;
    
    if (window.XMLHttpRequest) {
      xhr = new XMLHttpRequest();
    } else {
      // 兼容旧版IE
      // @ts-ignore ActiveXObject 仅用于 IE 兼容
      xhr = new (window as any).ActiveXObject("Microsoft.XMLHTTP");
    }
    
    if (!xhr) {
      reject(new Error('无法创建XMLHttpRequest对象'));
      return;
    }
    
    xhr.open('GET', filePath, true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(xhr.responseText);
        } else {
          reject(new Error(`加载失败，状态码: ${xhr.status}`));
        }
      }
    };
    xhr.onerror = function() {
      reject(new Error('网络错误'));
    };
    xhr.send(null);
  });
}

const privated = ref('')

function privacy() {
  const filePath = '/mars-1/privacy.html'
  
  readFile(filePath)
    .then((data: any) => {
      private_info.value = data
      is_private_open.value = true
    })
    .catch((error: any) => {
      ElMessage.error('用户协议加载失败: ' + error.message)
      console.error('用户协议加载失败:', error)
    })
}
// ... existing code ...


function to_login() {
  router.replace(route.query.to ? String(route.query.to) : '/login')
}

const compressAndConvert = (file: File): Promise<string> => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()

    reader.onload = (event: ProgressEvent<FileReader>) => {
      const img = new Image()

      img.src = event.target?.result as string

      img.onload = () => {
        const canvas = document.createElement('canvas')
        const MAX_WIDTH = 800 // 设置最大宽度，根据需求调整
        const MAX_HEIGHT = 600 // 设置最大高度，根据需求调整
        let width = img.width
        let height = img.height

        if (width > height) {
          if (width > MAX_WIDTH) {
            height *= MAX_WIDTH / width
            width = MAX_WIDTH
          }
        }
        else {
          if (height > MAX_HEIGHT) {
            width *= MAX_HEIGHT / height
            height = MAX_HEIGHT
          }
        }

        canvas.width = width
        canvas.height = height

        const ctx = canvas.getContext('2d')

        ctx?.drawImage(img, 0, 0, width, height)

        const compressedBase64 = canvas.toDataURL('image/jpeg') // 使用JPEG格式，可根据需要调整格式和质量

        resolve(compressedBase64)
      }

      img.onerror = (error: Event | string) => {
        reject(error)
      }
    }

    reader.onerror = (error: ProgressEvent<FileReader>) => {
      reject(error)
    }

    reader.readAsDataURL(file)
  })
}

const handleFileUpload = (event: Event) => {
  const file = (event.target as HTMLInputElement).files?.[0]
  if (file) {
    compressAndConvert(file)
      .then(base64Data => {
        // 处理压缩和转换后的base64数据
        user_information.value.icon = base64Data
        console.log(base64Data)
      })
      .catch(error => {
        // 处理错误
        console.error(error)
      })
  }
}
</script>

<template>
  <div id="mars-register-container">
    <el-dialog
      v-model="is_private_open"
      fullscreen
      title="《数据平台隐私条款》"
      class="mars-dialog"
    >
      <div class="agreement">
        <div v-html="private_info" />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="is_private_open = false" class="mech-button">关闭</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 顶部导航 -->
    <!-- <div class="mars-header">
      <router-link to="/">
        <div class="logo-container">
          <img
            :src="TestLogo"
            alt="火星数据平台"
            class="mars-logo"
          >
        </div>
      </router-link>
    </div> -->

    <!-- 主内容区域 -->
    <div class="mars-container">
      <div class="mars-form-wrapper">
        <!-- 欢迎信息 -->
        <div class="welcome-section">
          <h2 class="mars-title">欢迎来到数据服务平台！</h2>
          <p class="mars-subtitle">创建您的账号</p>
        </div>

        <!-- 注册表单 -->
        <el-form class="mars-form">
          <!-- 用户名 -->
          <div class="form-item">
            <!-- <div class="input-header">
              <span class="terminal-label">*用户名</span>
            </div> -->
            <el-input
              v-model="user_information.username"
              placeholder="*请输入用户名"
              size="default"
              class="mars-input"
            />
          </div>

          <!-- 邮箱和电话 -->
          <div class="form-row">
            <div class="form-item">
              <!-- <div class="input-header">
                <span class="terminal-label">*邮箱</span>
              </div> -->
              <el-input
                v-model="user_information.email"
                placeholder="*请输入邮箱"
                size="default"
                class="mars-input"
              />
            </div>
            <div class="form-item">
              <!-- <div class="input-header">
                <span class="terminal-label">电话</span>
              </div> -->
              <el-input
                v-model="user_information.mobile"
                placeholder="请输入电话"
                size="default"
                class="mars-input"
              />
            </div>
          </div>

          <!-- 昵称和性别 -->
          <div class="form-row">
            <div class="form-item">
              <!-- <div class="input-header">
                <span class="terminal-label">昵称</span>
              </div> -->
              <el-input
                v-model="user_information.nick_name"
                placeholder="请输入昵称"
                size="default"
                class="mars-input"
              />
            </div>
            <div class="form-item">
              <!-- <div class="input-header">
                <span class="terminal-label">性别</span>
              </div> -->
              <el-select
                v-model="user_information.sex"
                placeholder="请选择性别"
                size="default"
                class="mars-select"
              >
                <el-option
                  v-for="item in sex_items"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>

          <!-- 单位性质 -->
          <div class="form-item">
            <!-- <div class="input-header">
              <span class="terminal-label">*单位性质</span>
            </div> -->
            <el-select
              v-model="user_information.workType"
              placeholder="*请选择单位性质"
              size="default"
              class="mars-select"
            >
              <el-option
                v-for="item in workTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>

          <!-- 工作单位 -->
          <div class="form-item">
            <!-- <div class="input-header">
              <span class="terminal-label">*工作单位</span>
            </div> -->
            <el-input
              v-model="user_information.workplace"
              placeholder="*请输入工作单位"
              size="default"
              class="mars-input"
            />
          </div>

          <!-- 研究领域 -->
          <div class="form-item">
            <!-- <div class="input-header">
              <span class="terminal-label">*研究领域</span>
            </div> -->
            <el-cascader
              v-model="user_information.research"
              :options="researchOptions"
              placeholder="*请选择研究领域"
              :props="{ checkStrictly: true, emitPath: false }"
              class="mars-cascader"
            />
          </div>

          <!-- 密码 -->
          <div class="form-item">
            <!-- <div class="input-header">
              <span class="terminal-label">*密码</span>
            </div> -->
            <el-input
              v-model="password_1"
              placeholder="*请输入密码"
              type="password"
              size="default"
              class="mars-input"
            />
          </div>

          <!-- 确认密码 -->
          <div class="form-item">
            <!-- <div class="input-header">
              <span class="terminal-label">*确认密码</span>
            </div> -->
            <el-input
              v-model="password_2"
              placeholder="*请再次输入密码"
              type="password"
              size="default"
              class="mars-input"
            />
          </div>

          <!-- 用户协议 -->
          <div class="privacy-agreement">
            <el-checkbox v-model="privacyPolicies" class="mars-checkbox">
              <span class="privacy-label">
                我已阅读并同意
                <el-button type="primary" link @click="privacy" class="mars-link">
                    用户协议和隐私政策
                  </el-button>
              </span>
            </el-checkbox>
          </div>

          <!-- 注册按钮 -->
          <el-button
            type="primary"
            size="default"
            class="mars-register-btn"
            @click="register"
          >
            注册
          </el-button>

          <!-- 登录链接 -->
          <div class="login-link">
            <span>已有账号?</span>
            <el-button type="primary" link @click="to_login" class="mars-link">
              直接登录
            </el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#mars-register-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-image: url('@/assets/images/pages/login.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  overflow: hidden;
}

#mars-register-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(135deg, 
      rgba(0, 10, 20, 0.1) 0%, 
      rgba(0, 0, 0, 0.2) 50%,
      rgba(10, 0, 20, 0.1) 100%);
  z-index: 1;
}

.mars-header {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(15px);
  padding: 15px 40px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(188, 78, 51, 0.1);
  position: relative;
  z-index: 2;
  
  .logo-container {
    display: flex;
    justify-content: flex-start;
  }
  
  .mars-logo {
    height: 60px;
    width: 200px;
    filter: brightness(0) invert(1);
  }
}

.mars-container {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 30px 60px;
  position: relative;
  z-index: 2;
}

.mars-form-wrapper {
  width: 450px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  border-radius: 12px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.welcome-section {
  text-align: center;
  margin-bottom: 25px;
  
  .mars-title {
    color: #fff;
    margin-bottom: 8px;
    font-size: 1.3rem;
    font-weight: 600;
  }
  
  .mars-subtitle {
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    font-size: 0.9rem;
  }
}

.form-item {
  margin-bottom: 18px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.input-header {
  margin-bottom: 6px;
  
  .terminal-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    font-weight: 500;
  }
}

:deep(.mars-input) {
  .el-input__wrapper {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    box-shadow: none;
    
    &.is-focus {
      border-color: rgba(188, 78, 51, 0.3);
    }
  }
  
  .el-input__inner {
    color: #fff;
    background: transparent;
    font-size: 0.9rem;
    height: 38px;
    
    &::placeholder {
      color: rgba(255, 255, 255, 0.5);
    }
  }
}

:deep(.mars-select) {
  width: 100%;
  
  .el-select__wrapper {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    box-shadow: none;
    height: 38px;
    
    &.is-focus {
      border-color: rgba(188, 78, 51, 0.3);
    }
  }
  
  .el-select__placeholder {
    color: rgba(255, 255, 255, 0.5);
  }
}




:deep(.mars-cascader) {
  width: 100%;
  
  .el-cascader__wrapper {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    height: 38px;
    
    &.is-focus {
      border-color: rgba(188, 78, 51, 0.3);
    }
  }
  
  .el-input__wrapper {
  background-color: rgba(255, 255, 255, 0.1);
  color: white !important;
  border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 8px !important; // 圆角
  font-size: 16px !important;
  min-height: 36px !important;
  box-shadow: none !important;
  //transition: border-color 0.2s;
}


  .el-input__inner {
    color: #fff;
    background: transparent;
    
    &::placeholder {
      color: rgba(255, 255, 255, 0.5);
    }
  }
}

/* 修改下拉框样式 */
:deep(.el-select-dropdown) {
  background: rgba(20, 20, 20, 0.95) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
}

:deep(.el-select-dropdown__item) {
  color: rgba(255, 255, 255, 0.9) !important;
  background: transparent !important;
}

:deep(.el-select-dropdown__item.hover),
:deep(.el-select-dropdown__item:hover) {
  background: rgba(188, 78, 51, 0.2) !important;
}

:deep(.el-select-dropdown__item.selected) {
  color: rgba(188, 78, 51, 0.9) !important;
  background: rgba(188, 78, 51, 0.1) !important;
}

:deep(.el-cascader__dropdown) {
  background: rgba(20, 20, 20, 0.95) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
}

:deep(.el-cascader-node) {
  color: rgba(255, 255, 255, 0.9) !important;
}

:deep(.el-cascader-node:hover),
:deep(.el-cascader-node:focus) {
  background: rgba(188, 78, 51, 0.2) !important;
}

:deep(.el-cascader-node.in-active-path),
:deep(.el-cascader-node.is-selectable.in-checked-path),
:deep(.el-cascader-node.is-active) {
  color: rgba(188, 78, 51, 0.9) !important;
}

:deep(.el-cascader-panel) {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

:deep(.el-cascader-menu) {
  background: transparent !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

:deep(.el-cascader-node__prefix) {
  color: rgba(255, 255, 255, 0.7) !important;
}

:deep(.el-cascader-node__postfix) {
  color: rgba(255, 255, 255, 0.7) !important;
}

.privacy-agreement {
  margin: 25px 0 20px 0;
  
  .privacy-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
  }
}

:deep(.mars-checkbox) {
  .el-checkbox__input {
    .el-checkbox__inner {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      
      &::after {
        border-color: rgba(188, 78, 51, 0.8);
      }
    }
    
    &.is-checked .el-checkbox__inner {
      background: rgba(188, 78, 51, 0.15);
      border-color: rgba(188, 78, 51, 0.4);
    }
  }
  
  .el-checkbox__label {
    color: rgba(255, 255, 255, 0.9);
  }
}

.mars-register-btn {
  width: 100%;
  height: 42px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 6px;
  background: rgba(188, 78, 51, 0.7);
  border: 1px solid rgba(188, 78, 51, 0.3);
  
  &:hover {
    background: rgba(188, 78, 51, 0.8);
  }
}

.login-link {
  text-align: center;
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  
  span {
    margin-right: 8px;
  }
}

:deep(.mars-link) {
  color: rgba(188, 78, 51, 0.7);
  font-weight: 500;
  &:hover {
    color: rgba(188, 78, 51, 0.9);
  }
}

:deep(.mars-dialog) {
  .el-dialog {
    background: rgba(20, 20, 20, 0.95);
    backdrop-filter: blur(25px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    
    .el-dialog__header {
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      margin-right: 0;
    }
    
    .el-dialog__title {
      color: #fff;
    }
    
    .agreement {
      max-height: 60vh;
      overflow-y: auto;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.9);
    }
  }
}

.mech-button {
  background: rgba(188, 78, 51, 0.7);
  border: 1px solid rgba(188, 78, 51, 0.3);
  
  &:hover {
    background: rgba(188, 78, 51, 0.8);
  }
}

@media (max-width: 768px) {
  .mars-container {
    padding: 20px;
    justify-content: center;
  }
  
  .mars-form-wrapper {
    width: 100%;
    max-width: 400px;
    padding: 25px 20px;
  }
  
  .mars-header {
    padding: 15px 20px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
}
</style>